<template>
  <div class="wrap">
      <input v-model="txt" type="text" @keydown.enter="toAdd" placeholder="输入任务">
      <h1>未完成的任务</h1>
      <div class="nolist">
        <div class="list_one" v-for="(item,index) in nolist" :key="item.id">
          <input @click="toChange(item.id)" type="checkbox" >
          <span>{{item.txt}}</span>
          <button @click="toDel(item.id)">删除</button>
        </div>
      </div>
      <h1>已完成的任务</h1>
      <div class="donelist">
        <div class="list_one" v-for="(item,index) in doneList" :key="item.id">
           <input  :checked="item.isCheck" type="checkbox" >
            <span>{{item.txt}}</span>
            <button @click="toDel(item.id)">删除</button>
        </div>
      </div>


  </div>
</template>
<script>

export default {
  data(){
    return {
      txt:"",//任务名称
      todoList:[
      ]
    }
  },
  methods:{
    toAdd(){
      // 添加方法 要向todoList添加数据
      this.todoList.push({
        id:new Date().getTime(),
        isCheck:false,
        txt:this.txt
      })
    },
    toChange(id){ //点击未完成的复选框 让数据完成
        this.todoList.forEach((item,index)=>{
          if(item.id==id){ //通过id找到数据
              item.isCheck=true;
          }
        })
    },
    toDel(id){//删除 根据id删除
      this.todoList.forEach((item,index)=>{
        if(item.id==id){
          this.todoList.splice(index,1)
        }
      })
    }
  },
  computed:{
     nolist(){//未完成的数据
      // 未完成是要所有数据中 ischeck为false的
      let arr=this.todoList.filter(item=>item.isCheck==false)
      return arr
     },
     doneList(){//完成的数据
        let arr=this.todoList.filter(item=>item.isCheck==true)
        return arr
     }
  }
}
</script>
<style lang="less" scoped>
  .wrap{
    width:700px;
    margin:10px auto;
    >input{
      width:700px;
      height:40px;
    }
    .nolist{
         width:700px;
      .list_one{
        width:700px;
        display:flex;
        justify-content:space-between;
        background:skyblue;
        margin-top:10px;
      }
    }
    .donelist{
        width:700px;
      .list_one{
        width:700px;
        display:flex;
        justify-content:space-between;
        background:pink;
          margin-top:10px;
      }
    }
  }
</style>


